{% extends 'multiple/index.html' %}

{% block result_show %}
{% if error %}
    <div class="callout warning">
        {{ error_msg | safe}}
    </div>
{% else %}
    <div class="grid-x">
        <div class="cell small-12 medium-6">
            <h3>Original image</h3>
            <img src="data:image/jpg;base64, {{original_image}}" class="result-group-img original-img">
        </div>
        <div class="cell small-12 medium-6">
            <h3>Calculated image</h3>
            <img src="data:image/jpg;base64, {{result_image}}" class="result-group-img result-img">
        </div>
    </div>
    <hr>
    <h4>Calculated result values</h4>
    <div class="grid-x">
        <div class="cell small-12 medium-6">
            <div class="card">
                <div class="card-divider">
                <h5>Ellipse axies coordinates</small></h5>
                </div>
                <table>
                    <tbody>
                        <tr>
                            <th>top</th>
                            <td>{{ circle['top'] }}</td>
                        </tr>
                        <tr>
                            <th>right</th>
                            <td>{{ circle['right'] }}</td>
                        </tr>
                        <tr>
                            <th>bottom</th>
                            <td>{{ circle['bottom'] }}</td>
                        </tr>
                        <tr>
                            <th>left</th>
                            <td>{{ circle['left'] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="cell small-12 medium-6">
            <div class="card">
                <div class="card-divider">
                <h5>Parallel line</h5>
                </div>
                <table>
                    <tbody>
                        <tr>
                            <th>line</th>
                            <td>{{ parallel['line'] }}</td>
                        </tr>
                        <tr>
                            <th>y coordinate of line</th>
                            <td>{{ parallel['line_y'] }}</td>
                        </tr>
                        <tr>
                            <th>line equation</th>
                            <td>{{ parallel['parallel_equation'] }}</td>
                        </tr>
                        <tr>
                            <th>&nbsp;</th>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <ul>
        <li>contact_point = {{ contact_point }}</li>
        <li>contact_line_point = {{ contact_line_point[0] }} to {{ contact_line_point[1] }}</li>
        <li>
            <strong>angle = {{ angle }}°</strong>
        </li>
    </ul>
{% endif %}
{% endblock %}